import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Tabs, PullToRefresh, Toast} from 'antd-mobile';
import axios from 'axios';
import Loading from '../../components/common/Loading/index'
import CateShow from '../../components/Cate/CateShow/index'
import './cate.scss'


import SearchWithButtonHeader from '../../components/Headers/SearchWithButtonHeader/searchWithButtonHeader'
import {loadCate} from "../../actions/loadAction";
import {changePath} from '../../actions/routerAction'

@connect(
    state=>state.loadReducer,
    {loadCate,changePath}
)
class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
        }
    }

    onClickCate=(cateId)=>{
        sessionStorage.setItem('__search_prev_path__',this.props.location.pathname)
        sessionStorage.setItem('__cateId__',cateId);
        this.props.history.push('/searchlist/null')
        this.props.changePath('/searchlist/null')
    }

    //挂载组件
    componentDidMount() {
        // this.props.load.loadCate(() => {
        //     this.setState({
        //         cateId: this.props.cates[0].id
        //     })
        // })
        this.props.loadCate(
            (cates)=> {
                if (cates)
                    this.setState({
                        loading:false,
                        cateId:cates[0].id
                    });
            }
        );
    }

    setCateShowData=()=>{

        let data=[...this.props.cates],
            showData=[];
        while(data.length!==0){
            let twoCate=[];
            twoCate.push(data.shift());
            twoCate.push(data.shift());
            showData.push(twoCate);
        }
        return showData;
    }

    render() {
       /* let cates = this.props.cates?this.props.cates.map(v=>{
            return {
                ...v,
                title:v.name.split('').length>5?v.name.split('').slice(0,4).join('')+'...':v.name
            }
        }):[]*/
        return (
            <div className="cate-page">
                <SearchWithButtonHeader returnbtn={true}></SearchWithButtonHeader>
                {
                    this.state.loading?
                        <Loading/>
                        :
                        <div className="cate-body">
                            <CateShow data={this.setCateShowData()} searchCateById={this.onClickCate} />
                        </div>
                }
            </div>
        )
    }
}

export default Cate;